<script setup>
import {onMounted, ref} from 'vue';
import {ElForm, ElFormItem, ElInput, ElButton, ElSelect, ElOption, ElMessage} from 'element-plus';
import {router} from "../../router/index.js";
import axios from "axios";

const activeStep = ref(1);
const form = ref({});
const formRef = ref(null);

const storeOptions = ref([]);

const validatePhone = (rule, value, callback) => {
  const phoneReg = /^1[3456789]\d{9}$/;
  if (!phoneReg.test(value)) {
    callback(new Error('手机号码不合法'));
  } else {
    callback();
  }
};

const rules = {
  phone: [
    { required: true, message: '手机号不能为空', trigger: 'blur' },
    { validator: validatePhone, trigger: 'blur' }
  ],
  code: [
    { required: true, message: '验证码不能为空', trigger: 'blur' }
  ],
  staffName: [
    { required: true, message: '员工姓名不能为空', trigger: 'blur' }
  ],
  pwd: [
    { required: true, message: '密码不能为空', trigger: 'blur' },
    { min: 6, max: 14, message: '密码必须6-14位', trigger: 'blur' }
  ],
  storeId:[
    { required: true, message: '所属门店不能为空', trigger: 'change' },
  ]
};

const btnText = ref("发送验证码")
const btnType = ref(false)
const phoneFormRef = ref(null)
const goToSms = () => {
  phoneFormRef.value.validateField('phone',(valid) => {
    if (valid) {
      axios.get(`/carcenter-service-sms/sms/${form.value.phone}`).then((resp) => {
        ElMessage.success(resp.data.data.data);
      }).catch(err => {
        ElMessage.error(err.response.data);
      }).finally(()=>{
        btnType.value = true;
        //写一个定时器 定时15秒
        let seconds= 15;
        let timer = setInterval(()=>{
          seconds --;
          if(seconds > 0){
            btnText.value = `${seconds}秒`;
          }else {
            btnType.value = false;
            btnText.value = "发送验证码";
            clearInterval(timer);
          }
        },1000)
      });
    }
  })
};
const stepType = ref(false)
const nextStep = () => {
  phoneFormRef.value.validateField('code',(valid) => {
    if (valid) {
      axios.post('/carcenter-service-personnel/staff/checkPhone', form.value).then((res) => {
        stepType.value = true
        if (res.data.code == 200) {
          ElMessage.success(res.data.message);
          activeStep.value++;
        }else {
          ElMessage.error(res.data.message);
        }
      }).finally(()=>{
        stepType.value = false
      })
    }})
};

const prevStep = () => {
  activeStep.value--;
};

const submitForm = () => {
  formRef.value.validate(valid => {
  if (valid) {
    axios.post('/carcenter-service-personnel/staff/register', form.value).then((res) => {
      activeStep.value = 3;
    })
  }
})
};
const getStoreId = () => {
  axios.get(`/carcenter-service-store/store-info/getStore`).then((res) => {
    storeOptions.value = res.data.data;
  })
}
onMounted(()=>{
  getStoreId();
})
</script>

<template>
  <div class="register-container">
    <el-steps :active="activeStep" finish-status="success" simple style="margin-bottom: 20px">
      <el-step title="手机验证" />
      <el-step title="填写信息" />
      <el-step title="注册成功" />
    </el-steps>

    <div class="step-content">
      <div v-show="activeStep === 1" class="step-pane">
        <el-form :model="form" :rules="rules" ref="phoneFormRef" label-width="100px">
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="form.phone" />
          </el-form-item>
          <el-form-item label="验证码" prop="code">
            <el-input v-model="form.code">
              <template #append>
                <el-button @click="goToSms" :disabled="btnType">{{btnText}}</el-button>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="nextStep" :disabled="stepType">下一步</el-button>
            <el-button @click="()=>router.go(-1)">返回</el-button>
          </el-form-item>
        </el-form>
      </div>

      <div v-show="activeStep === 2" class="step-pane">
        <el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
          <el-form-item label="姓名" prop="staffName">
            <el-input v-model="form.staffName" />
          </el-form-item>
          <el-form-item label="密码" prop="pwd">
            <el-input v-model="form.pwd" type="password" show-password />
          </el-form-item>
          <el-form-item label="账号">
            <el-input v-model="form.account" />
          </el-form-item>
          <el-form-item label="所属门店" prop="storeId">
            <el-select v-model="form.storeId" placeholder="请选择门店">
              <el-option
                  v-for="item in storeOptions"
                  :key="item.id"
                  :label="item.storeName"
                  :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button @click="prevStep">上一步</el-button>
            <el-button type="primary" @click="submitForm">提交</el-button>
          </el-form-item>
        </el-form>
      </div>

      <div v-show="activeStep === 3" class="step-pane success-pane">
        <h2>注册成功</h2>
        <p>您的账号已成功注册</p>
        <el-button type="primary" @click="router.push('/front/login')">前往登录</el-button>
      </div>
    </div>
  </div>
</template>

<style scoped>
.register-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

.step-content {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
}

.step-pane {
  padding: 20px 0;
}

.success-pane {
  text-align: center;
}
</style>